<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/qingchu.css">
    <link rel="stylesheet" href="./css/页面css.css">
</head>

<body>
    <header>
        <div class="d1">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;后台管理系统</div>
        <ul>
            <li>当前用户：</li>
            <li>bootstrap中文</li>
            <li>角色:</li>
            <li>管理员</li>
        </ul>
    </header>
    <footer>
        <ul>
            <li>后台首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
            <li>设计元素&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
            <li>表单元素&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
            <li>示例页面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
            <li>常用列表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
            <li>脚本插件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
            <li>统计图表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
            </li>
        </ul>
        <section>
            <div class="up">
                <span class="ups1"><</span>
                <span class="ups2">欢迎首页</span>
                <span class="ups4">页面操作</span>
                <span class="ups3">></span>
            </div>
            <ul class="center">
                <li>
                    <div>
                        <div class="shouru">今日收入</div>
                        <div>100,000.00</div>
                    </div>
                    <div class="tubiao">图标</div>
                </li>
                <li>
                    <div>
                        <div class="shouru">今日收入</div>
                        <div>100,000.00</div>
                    </div>
                    <div class="tubiao">图标</div>
                </li>
                <li>
                    <div>
                        <div class="shouru">今日收入</div>
                        <div>100,000.00</div>
                    </div>
                    <div class="tubiao">图标</div>
                </li>
                <li>
                    <div>
                        <div class="shouru">今日收入</div>
                        <div>100,000.00</div>
                    </div>
                    <div class="tubiao">图标</div>
                </li>
            </ul>
            <ul class="last">
                <li id="biao1"></li>
                <li id="biao2"></li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                        <th>状态</th>
                        <th>处理情况</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>12345678</td>
                        <td>黑色休闲裤</td>
                        <td>2019-09-02</td>
                        <td><span class="showtime">正常</span></td>
                        <td>完成度</td>
                    </tr> -->
                </tbody>
            </table>
        </section>
    </footer>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./js/promise封装ajax.js"></script>
<script src="./js/页面接口.js"></script>
<script src="../aaaa.js"></script>
<script>
    //1.绘制左侧图表
    var li1 = document.querySelector('#biao1');
    var e = echarts.init(li1);
    e.setOption({
        title: { //图表的标题
            text: '每月收入',
            left: 'View Report',
        },
        legend: { //图例
            top: 25,
        },
        xAxis: { //x轴设置
            splitLine: {
                show: true
            },
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 20, //柱子的宽度
                showBackground: true,//显示背景色
                color: '#83bff6',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2550, 1550, 1650, 3350, 4800, 3500, 1600,2500,2200,1800,3900,1800]
            },
            {
                name: '周期每月收入',
                barWidth: 20, //柱子的宽度
                showBackground: true,//显示背景色
                color: '#63bf00',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2200, 1600, 1800, 3000, 4000, 3700, 1800,2000,2800,2200,3800,3700]
            }
        ]
    });


    //2.绘制右侧图表
    var li2 = document.querySelector('#biao2')
    var e = echarts.init(li2);
    e.setOption({
        title: { //图表的标题
            text: '每月收入走势',
            left: 'left',
        },
        legend: { //图例
            top: 25,
        },
        xAxis: { //x轴设置
            splitLine: {
                show: true
            },
            data: ['2009', '2010', '2011', '2012', '2113', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [50, 55, 60, 40, 45, 40, 65,40,68,20,72,60],
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'
                    }
                }
            },
            {
                name: '每年同期收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [48, 50, 52, 48, 40, 35, 65,45,58,30,72,56],
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gruy', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'
                    }
                }

            }

        ]
    });


    // 3.表格的渲染
        render(data.list)
    function render(data) {
        var str = data.map((item, index) => {
            return `
            <tr>
                <td>${item.id}</td>
                <td>${item.dd}</td>
                <td>${item.name}</td>
                <td>2019-09-0${item.day}</td>
                <td><span class="showtime">${item.zhuangtai}</span></td>
                <td>完成度</td>
            </tr>
        `
        }).join('')
        document.querySelector('tbody').innerHTML = str
        var showtime= document.querySelectorAll('.showtime')

        for(let i=1;i<showtime.length;i++){
            if(showtime[i].innerText=="发货中"){
                showtime[i].classList.add('red')
            }
            else if(showtime[i].innerText=="待确认"){
                showtime[i].classList.add('yellow')
            }
            else{
                showtime[i].classList.add('green')
            }
        }
    }
</script>